<template>
  <div>
    <el-carousel height="155px" interval:5000 indicator-position="none">
      <el-carousel-item v-for="(item, index) in 2" :key="index">
        <div class="title-water" v-if="index == 0">
          <div class="water-left">
            <div class="top">
              <img src="../../assets/img/PM2.5.png" alt="" />
              <h2>2.71</h2>
              <p>当前PM2.5值(ug/m3)</p>
            </div>
            <div class="bott">
              <div class="bott-left">
                <span>6.71</span>
                <p>历史最低值</p>
              </div>
              <div class="bott-right">
                <span>6.71</span>
                <p>历史最高值</p>
              </div>
            </div>
          </div>
          <div class="water-right">
            <water :title="title1"></water>
          </div>
        </div>
        <div class="title-water" v-if="index == 1">
          <div class="water-left">
            <div class="top">
              <img src="../../assets/img/PM2.5.png" alt="" />
              <h2>2.71</h2>
              <p>当前PM10值(ug/m3)</p>
            </div>
            <div class="bott">
              <div class="bott-left">
                <span>6.71</span>
                <p>历史最低值</p>
              </div>
              <div class="bott-right">
                <span>6.71</span>
                <p>历史最高值</p>
              </div>
            </div>
          </div>
          <div class="water-right">
            <water :title="title2"></water>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import water from "@/components/charts/water";
export default {
  name: "pm",
  components: {
    water,
  },
  data() {
    return {
      title1: "PM2.5推移图",
      title2: "PM10推移图",
    };
  },
};
</script>

<style lang="scss" scoped>
.title-water {
  width: 100%;
  height: 100%;
  display: flex;
  /* // justify-content: center;
  // align-items: center; */
  .water-right {
    width: 100%;
    height: 100%;
    flex: 4;
    padding: 30px 10px 0;
    // background-color: #fff;
  }
  .water-left {
    flex: 3;
    // background-color: pink;
    img {
      top: 140px;
      left: 104px;
    }
    .top {
      width: 100%;
      margin-top: 20px;
      text-align: center;
      font-size: 10px;
      p {
        margin: 0;
        color: #fff;
      }
      h2 {
        margin: 8px 0;
        color: #fbfd83;
        font-size: 19.07px;
      }
    }
    .bott {
      display: flex;
      justify-content: space-around;
      font-size: 12px;
      margin-top: 5px;
      p {
        color: #579ef2;
        font-size: 11.44px;
        margin: 1px 0;
      }
      span {
        color: #2affff;
        font-size: 15.26px;
        margin: 0;
      }
      .bott-left {
        text-align: center;
      }
      .bott-right {
        text-align: center;
      }
    }
  }
}
</style>